<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    function draw() {
      var ctx = document.getElementById('canvas').getContext('2d')
      ctx.fillRect(0, 0, 150, 150)
      ctx.translate(75, 75)

      ctx.beginPath()
      ctx.arc(0, 0, 60, 0, Math.PI * 2, true)
      ctx.clip()

      var lingrad = ctx.createLinearGradient(0, -75, 0, 75)
      lingrad.addColorStop(0, '#232256')
      lingrad.addColorStop(1, '#143778')
      ctx.fillStyle = lingrad
      ctx.fillRect(-75, -75, 170, 170)
      for (var i=0; i<50; i++) {
        ctx.save()
        ctx.fillStyle = '#fff'
        ctx.translate(75 - Math.random() * 150, 75 - Math.random() * 150)
        drawStar(ctx, Math.floor(Math.random() * 4) + 2)
        ctx.restore()
      }
    }

    function drawStar(ctx, r) {
      ctx.save()
      ctx.moveTo(r, 0)
      ctx.beginPath()
      for (var i=0; i<=9; i++) {
        ctx.rotate(Math.PI / 5)
        if (i % 2 === 0) {
          ctx.lineTo((r/0.525731)*0.200811, 0)
        } else {
          ctx.lineTo(r, 0)
        }
      }
      ctx.fill()
      ctx.restore()
    }
  </script>
</head>
<body onload="draw()">
  <canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>